<template>
	<view class="content-class">
		<u-tabs class="tab" :activeStyle="{
		            color: '#FFD8BB',
					fontSize:'14px',
					whiteSpace: 'nowrap',
					fontWeight:'800'
		        }" :inactiveStyle="{
		            color: '#999',
					fontSize:'14px',
					whiteSpace: 'nowrap'
		        }" lineColor="#FFD8BB" lineWidth="86px" :list="list1" @click="clickTab" :current="activeTab"></u-tabs>
		<u-tabs class="date-tab" :activeStyle="{
		            color: '#0B0F12',
					background: 'linear-gradient( 90deg, #FFD8BB 0%, #F0986A 100%)',
					borderRadius: '16px',
					fontSize:'12px',
					whiteSpace: 'nowrap',
		        }" :inactiveStyle="{
		            color: '#fff',
					fontSize:'12px',
					whiteSpace: 'nowrap'
		        }" :list="tabList" @click="tabClick" :current="activeIndex"></u-tabs>
		<Day v-if="activeIndex == 0 && activeTab == 0"></Day>
		<Month v-if="activeIndex == 2 && activeTab == 0"></Month>
		<HealthTrends v-if="activeTab == 1"> </HealthTrends>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import Day from "./Day.vue"
	import Month from "./Month.vue"
	import HealthTrends from "./HealthTrends.vue"
	export default {
		data() {
			return {
				activeIndex: 0,
				activeTab: 0,
				list1: [{
					name: '历史记录',
				}, {
					name: '健康趋势',
				}],
				tabList: [],
				tabList0: [{
					name: '日',
				}, {
					name: '周',
				}, {
					name: '月'
				}, {
					name: '6个月'
				}],
				tabList1: [{
					name: '经络周平均值',
				}, {
					name: '经络月平均值',
				}],

			}
		},
		computed: {},
		components: {
			Day,
			Month,
			HealthTrends
		},
		onLoad() {
			this.tabClick({
				index: this.activeIndex
			})
			this.clickTab({
				index: this.activeTab
			})
		},
		methods: {
			clickTab(e) {
				this.activeTab = e.index
				this.activeIndex = 0
				this.tabList = this[`tabList${e.index}`]
			},
			tabClick(e) {
				this.activeIndex = e.index
				if (e.index == 0) {
					this.cardData = {
						title: '睡眠分数',
						status: '良好',
						value: 4,
						score: '76',
						date: '2025-02-12',
						desc: '在深度睡眠期间，身体会进行重要的生理恢复，如身体所有生理模式的恢复。从细胞再生、免疫力增强到肌肉修复。此外，在深度睡眠期间，身体会分泌促进生长和发育的重要荷尔蒙这对于对免疫系统和肌肉要求很高的人来说尤其有用。'
					}
				} else if (e.index == 1) {
					this.cardData = {
						title: '平均周睡眠分数',
						status: '良好',
						value: 4,
						score: '76',
						date: '2025-02-12至2025-02-1'
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-class {

		.tab {
			background-color: #1B1B1B;

			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1;

				.u-tabs__wrapper__nav__item__text {
					height: 100%;
					display: inline-flex;
					align-items: center;
					width: 100%;
					justify-content: center;
				}
			}
		}

		.date-tab {
			background-color: #1B1B1B;
			border-radius: 16px;
			margin: 20px 15px;


			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1;
				padding: 0px;
				height: 32px !important;

				.u-tabs__wrapper__nav__item__text {
					height: 100%;
					display: inline-flex;
					align-items: center;
					width: 100%;
					justify-content: center;
				}
			}

			::v-deep .u-tabs__wrapper__nav__line {
				display: none
			}
		}

	}
</style>